<template lang="pug">
  .CreateAccountModal
    Modal(
      v-model="isShowAdjusSuperiorModal"
      title="调整职位信息"
      class-name="vertical-center-modal"
      width="400"
    )
      Form.ivu-row.has-rules-item2(ref="formData" :model="formData" :rules="rules" :label-width="140")
        FormItem.form-item.ivu-col(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'input'")
            Input(v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled")
          template(v-if="item.type === 'select'")
            Select(v-model="formData[item.model]" :placeholder="item.placeholder" filterable)
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.label}}
          template(v-if="item.type === 'datePicker'")
            DatePicker.w-100(:value="formData[item.model]" :placeholder="item.placeholder" type="date")
          //- template(v-if="item.type === 'cascader'")
          //-   .areaTree
          //-     Cascader(v-model="formData[item.model]" :data="areaTree" clearable @on-change="areaTreeChange(item.model, $event)")
          template(v-if="item.type === 'cascader'")
            Input(v-model="formData[item.model]" v-show="false")
            //- Cascader(v-if="item.model === 'departmentId'" v-model="formData[item.arrModel]" :data="departmentSource" clearable @on-change="handleDepartmentTreeChange" :change-on-select="true")
            //-   Input(type="text" icon="ios-arrow-down" :value="selectParentObj.label")
            //- Cascader(v-model="formData[item.arrModel]" :data="arrListDown[item.options]" clearable @on-change="handleParentTreeChange" :change-on-select="true")
            //-   Input(type="text" icon="ios-arrow-down" :value="selectParentObj.label")
            Cascader(v-model="formData[item.arrModel]" :data="arrListDown[item.options]" clearable @on-change="(value, selectedData) => handleTreeChange(value, selectedData, item.model)" :change-on-select="true")
              Input(type="text" icon="ios-arrow-down" :value="item.model === 'departmentId' ? selectDepartmentObj.label : selectParentObj.label")
          template(v-if="item.type === 'switch'")
            i-switch(v-model="formData[item.model]")
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit") 保存
</template>

<script>
import { Common } from '@/utils/common.js'
// import { UserApi } from '@/api/User.api.js'
import UserApi from '@/api/User.api.js'
import { PositionApi } from '@/api/Position.api.js'
export default {
  name: 'AdjusSuperiorModal',

  watch: {
  },

  computed: {
  },

  data () {
    return {
      isShowAdjusSuperiorModal: false,
      createOrganizationModalTitle: '',
      basicDataId: null,
      formData: {
        id: '',
        departmentId: '',
        departmentName: '',
        parentName: '',
        parentId: '',
        effectTime: new Date()
      },
      formItem: [
        { type: 'input', label: '当前所属部门', placeholder: '请输入当前所属部门', prop: 'departmentName', model: 'departmentName', style: 'ivu-col-span-24', isDisabled: true },
        { type: 'input', label: '当前上级职位名称', placeholder: '请输入当前上级职位名称', prop: 'parentName', model: 'parentName', style: 'ivu-col-span-24', isDisabled: true },
        { type: 'cascader', label: '调整后所属部门', placeholder: '请选择调整后所属部门', prop: 'departmentId', model: 'departmentId', arrModel: 'departmentIdArr', style: 'ivu-col-span-24 is-required', options: 'departmentSource' },
        { type: 'cascader', label: '调整后上级职位', placeholder: '请选择调整后上级职位', prop: 'parentId', model: 'parentId', arrModel: 'parentIdArr', style: 'ivu-col-span-24', options: 'parentSource' },
        { type: 'datePicker', label: '生效日期', placeholder: '请选择生效日期', prop: 'effectTime', model: 'effectTime', style: 'ivu-col-span-24 is-required' }
      ],
      rules: {
      },
      arrListDown: {
        departmentSource: [],
        parentSource: []
      },
      // departmentSource: [],
      // parentSource: [],
      areaTree: [], // 中国所有城市树
      selectParentObj: {},
      selectDepartmentObj: {}
    }
  },

  mounted () {
    this.areaTree = JSON.parse(localStorage.getItem('areaTree')) // 获取中国所有城市树
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, param) {
      this[methodsWords](param)
    },

    cancel () {
      this.isShowAdjusSuperiorModal = false
    },

    show () {
      this.isShowAdjusSuperiorModal = true
      this.$refs.formData.resetFields()
      console.log('点击是的show()')
    },

    // 根据ID获取信息
    async getModel (row) {
      this.basicDataId = row.id
      let res = await PositionApi.getUpdateParentModel({ id: row.id })
      console.log('获取modal res: ', res)
      if (res.status === 200 && res.data.success) {
        var data = res.data.data
        this.arrListDown.parentSource = data.parentSource
        this.arrListDown.departmentSource = data.departmentSource
        this.formData.departmentId = data.departmentId
        this.formData.id = row.id
        this.formData.departmentName = row.departmentName
        this.formData.parentName = row.parentName
      } else {
        // this.treeData = []
      }
    },

    // 所属部门改变后-上级职位下拉框数据源
    async getParentSource (id, departmentId) {
      var params = {
        id: id,
        departmentId: departmentId
      }
      let res = await PositionApi.getParentSource(params)
      console.log('所属部门改变后-上级职位下拉框数据源 res: ', res)
      if (res.status === 200 && res.data.success) {
        this.arrListDown.parentSource = res.data.data
      } else {
        this.arrListDown.parentSource = []
      }
    },

    handleTreeChange (value, selectedData, model) {
      console.log('value: ', value)
      console.log('selectedData: ', selectedData)
      console.log('model: ', model)
      if (model === 'departmentId') {
        this.selectDepartmentObj = selectedData[selectedData.length - 1]
        this.formData.departmentIdArr = value
        this.formData.departmentId = selectedData[selectedData.length - 1].value
        this.getParentSource(this.basicDataId, selectedData[selectedData.length - 1].value)
      } else {
        this.selectParentObj = selectedData[selectedData.length - 1]
        this.formData.parentIdArr = value
        this.formData.parentId = selectedData[selectedData.length - 1].value
      }
    },

    // 提交表单
    async handleSubmit () {
      console.log('提交表单：', this.formData)
      let res = await PositionApi.updateParent(this.formData)
      console.log('获取modal res: ', res)
      if (res.status === 200 && res.data.success) {
        this.isShowAdjusSuperiorModal = false
        this.$Message.success(res.data.message)
        this.$emit('handleSubmit')
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
